<template>
  <CommonLayout
    pageTitle="商品管理"
    sidebarTitle="商品筛选"
    :loading="loading"
    :isEmpty="products.length === 0 && !loading"
    emptyText="暂无商品数据"
  >
    <!-- 侧边栏筛选区 -->
    <template #sidebar>
      <form class="filter-form" @submit.prevent="handleFilter">
        <div class="filter-item">
          <label>关键字搜索</label>
          <input
            v-model="filterForm.keyword"
            placeholder="商品名称/描述"
            class="filter-input"
          />
        </div>

        <div class="filter-item">
          <label>分类筛选</label>
          <select v-model="filterForm.categoryId" class="filter-select" @change="handleCategoryChange">
            <option value="">全部分类</option>
            <option v-for="category in allCategories" :key="category.category_id" :value="category.category_id">
              {{ category.name }}
            </option>
          </select>
        </div>

        <div class="filter-item">
          <label>状态筛选</label>
          <select v-model="filterForm.status" class="filter-select">
            <option value="">全部状态</option>
            <option value="0">审核</option>
            <option value="1">在售</option>
            <option value="2">已售</option>
            <option value="3">下架</option>
          </select>
        </div>

        <div class="filter-item">
          <label>时间排序</label>
          <select v-model="filterForm.sortByTime" class="filter-select">
            <option value="">默认排序</option>
            <option value="created_at_asc">创建时间升序</option>
            <option value="created_at_desc">创建时间降序</option>
          </select>
        </div>

        <div class="filter-item">
          <label>价格排序</label>
          <select v-model="filterForm.sortByPrice" class="filter-select">
            <option value="">默认排序</option>
            <option value="price_asc">价格升序</option>
            <option value="price_desc">价格降序</option>
          </select>
        </div>

        <button type="submit" class="filter-btn">应用筛选</button>
        <button
          type="button"
          class="reset-btn"
          @click="resetFilter"
        >
          重置筛选
        </button>
      </form>
    </template>

    <!-- 主内容区 -->
    <template #content>
      <div class="product-table-container">
        <table class="product-table">
          <thead>
            <tr>
              <th>商品名称</th>
              <th>价格</th>
              <th>分类</th>
              <th>创建时间</th>
              <th>状态</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="product in products" :key="product.product_id" class="product-row">
              <td>{{ product.name }}</td>
              <td>￥{{ product.price.toFixed(2) }}</td>
              <td>{{ formatCategory(product.category_id) }}</td>
              <td>{{ formatDate(product.created_at) }}</td>
              <td>
                <span :class="['status-tag', product.status === 1 ? 'status-active' : product.status === 0 ? 'status-pending' : product.status === 2 ? 'status-sold' : 'status-inactive']">
                  {{ product.status === 0 ? '审核' : product.status === 1 ? '在售' : product.status === 2 ? '已售' : '下架' }}
                </span>
              </td>
              <td class="action-buttons">
                <button
                  class="btn-common btn查看"
                  @click="viewProductDetail(product)"
                >
                  查看
                </button>
                <button
                  v-if="product.status === 0"
                  class="btn-common btn审核"
                  @click="openApproveModal(product)"
                >
                  审核
                </button>
                <button
                  v-if="product.status === 1"
                  class="btn-common btn下架"
                  @click="handle下架(product.product_id)"
                >
                  下架
                </button>
                <button
                  v-if="product.status === 3"
                  class="btn-common btn上架"
                  @click="handle上架(product.product_id)"
                >
                  上架
                </button>
              </td>
            </tr>
          </tbody>
        </table>
        
        <!-- 分页组件 -->
        <div class="pagination-container">
          <div class="pagination-info">
            共 {{totalPages}} 页，当前第 {{currentPage}} 页，每页 {{pageSize}} 条
          </div>
          <div class="pagination-buttons">
            <button @click="prevPage" :disabled="currentPage === 1" class="pagination-btn">上一页</button>
            <button
              v-for="page in pageRange"
              :key="page"
              @click="goToPage(page)"
              :class="{ 'pagination-btn': true, 'active': page === currentPage }"
            >
              {{ page }}
            </button>
            <button @click="nextPage" :disabled="currentPage === totalPages" class="pagination-btn">下一页</button>
          </div>
        </div>
      </div>
    </template>
  </CommonLayout>
<!-- 审核商品模态框 -->
  <div v-if="showApproveModal" class="approve-modal-overlay" @click="closeApproveModal">
    <div class="approve-modal" @click.stop>
      <div class="modal-header">
        <h3>商品审核 - {{ currentProduct?.name }}</h3>
        <button class="close-btn" @click="closeApproveModal">&times;</button>
      </div>
      <div class="modal-body">
        <div v-if="loadingProductDetail" class="loading">加载中...</div>
        <div v-else-if="!currentProduct" class="error-message">获取商品详情失败或商品数据不完整</div>
        <div v-else class="product-detail">
          <div class="product-images">
            <div v-for="(image, index) in currentProduct.images" :key="index" class="image-item">
              <img :src="getProductImageUrl([image])" alt="商品图片 {{ index + 1 }}" class="product-image">
            </div>
          </div>
          <div class="product-info">
            <p><strong>商品ID:</strong> {{ currentProduct.product_id }}</p>
            <p><strong>商品名称:</strong> {{ currentProduct.title }}</p>
            <p><strong>价格:</strong> ¥{{ currentProduct.price.toFixed(2) }}</p>
            <p><strong>原价:</strong> ¥{{ currentProduct.original_price?.toFixed(2) || '无' }}</p>
            <p><strong>分类:</strong> {{ formatCategory(currentProduct.category_id) }}</p>
            <p><strong>创建时间:</strong> {{ formatDate(currentProduct.created_at) }}</p>
            <p><strong>描述:</strong> {{ currentProduct.description }}</p>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button class="btn-common btn-reject" @click="rejectProduct">拒绝</button>
        <button class="btn-common btn-approve" @click="approveProduct">通过</button>
      </div>
    </div>
  </div>

<!-- 查看商品详情模态框 -->
  <div v-if="showViewModal" class="approve-modal-overlay" @click="closeViewModal">
    <div class="approve-modal" @click.stop>
      <div class="modal-header">
        <h3>商品详情 - {{ viewedProduct?.name }}</h3>
        <button class="close-btn" @click="closeViewModal">&times;</button>
      </div>
      <div class="modal-body">
        <div v-if="loadingViewDetail" class="loading">加载中...</div>
        <div v-else-if="!viewedProduct" class="error-message">获取商品详情失败或商品数据不完整</div>
        <div v-else class="product-detail">
          <div class="product-images">
            <div v-for="(image, index) in viewedProduct.images" :key="index" class="image-item">
              <img :src="getProductImageUrl([image])" alt="商品图片 {{ index + 1 }}" class="product-image">
            </div>
          </div>
          <div class="product-info">
            <p><strong>商品ID:</strong> {{ viewedProduct.product_id }}</p>
            <p><strong>商品名称:</strong> {{ viewedProduct.title }}</p>
            <p><strong>价格:</strong> ¥{{ viewedProduct.price.toFixed(2) }}</p>
            <p><strong>原价:</strong> ¥{{ viewedProduct.original_price?.toFixed(2) || '无' }}</p>
            <p><strong>分类:</strong> {{ formatCategory(viewedProduct.category_id) }}</p>
            <p><strong>创建时间:</strong> {{ formatDate(viewedProduct.created_at) }}</p>
            <p><strong>描述:</strong> {{ viewedProduct.description }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive, computed } from 'vue';
import axios from 'axios';
import moment from 'moment';

// 分页相关状态
const currentPage = ref(1);
const totalPages = ref(1);
const pageSize = ref(10); // 每页显示10条数据

// 审核相关状态
const showApproveModal = ref(false);
const currentProduct = ref<Product | null>(null);
const loadingProductDetail = ref(false);

// 查看详情相关状态
const showViewModal = ref(false);
const viewedProduct = ref<Product | null>(null);
const loadingViewDetail = ref(false);

/**
 * 获取页码范围，用于显示分页按钮
 * @returns 页码数组
 */
const pageRange = computed(() => {
  const range = [];
  const maxVisiblePages = 5; // 最多显示5个页码按钮
  let startPage = Math.max(1, currentPage.value - Math.floor(maxVisiblePages / 2));
  let endPage = startPage + maxVisiblePages - 1;

  if (endPage > totalPages.value) {
    endPage = totalPages.value;
    startPage = Math.max(1, endPage - maxVisiblePages + 1);
  }

  for (let i = startPage; i <= endPage; i++) {
    range.push(i);
  }

  return range;
});

/**
 * 跳转到上一页
 */
const prevPage = () => {
  if (currentPage.value > 1) {
    currentPage.value--;
    fetchProducts();
  }
};

/**
 * 跳转到下一页
 */
const nextPage = () => {
  if (currentPage.value < totalPages.value) {
    currentPage.value++;
    fetchProducts();
  }
};

/**
 * 跳转到指定页码
 * @param page 目标页码
 */
const goToPage = (page: number) => {
  if (page !== currentPage.value && page >= 1 && page <= totalPages.value) {
    currentPage.value = page;
    fetchProducts();
  }
};
const API_BASE = import.meta.env.VITE_API_BASE_URL || 'http://localhost:5000';
const defaultProductImg = '/src/assets/product.svg';

/**
 * 获取商品图片URL
 * @param images 图片URL数组
 * @returns 完整的图片URL
 */
const getProductImageUrl = (images: string[] | null | undefined): string => {
  console.log(`[${moment().format('YYYY-MM-DD HH:mm:ss')}] [DEBUG] [图片加载] 原始URL数组:`, images);
  // 获取第一张图片URL
  const imageUrl = images?.[0] || null;
  console.log(`[${moment().format('YYYY-MM-DD HH:mm:ss')}] [DEBUG] [图片加载] 使用第一张图片URL: ${imageUrl}`);
  if (!imageUrl) {
    console.log(`[${moment().format('YYYY-MM-DD HH:mm:ss')}] [DEBUG] [图片加载] URL为空，使用默认图片: ${defaultProductImg}`);
    return defaultProductImg;
  }
  if (imageUrl.startsWith('http') || imageUrl.startsWith('data:')) {
    console.log(`[${moment().format('YYYY-MM-DD HH:mm:ss')}] [DEBUG] [图片加载] URL以http或data:开头，直接使用: ${imageUrl}`);
    return imageUrl;
  }
  if (imageUrl.startsWith('/uploads/')) {
    const fullUrl = API_BASE + imageUrl;
    console.log(`[${moment().format('YYYY-MM-DD HH:mm:ss')}] [DEBUG] [图片加载] URL以/uploads/开头，拼接API_BASE: ${fullUrl}`);
    return fullUrl;
  }
  console.log(`[${moment().format('YYYY-MM-DD HH:mm:ss')}] [DEBUG] [图片加载] URL不符合以上条件，使用默认图片: ${defaultProductImg}`);
  return defaultProductImg;
};



/**
 * 打开审核模态框
 * @param product 要审核的商品
 */
const openApproveModal = async (product: Product) => {
  showApproveModal.value = true;
  loadingProductDetail.value = true;
  try {
    const token = localStorage.getItem('token');
    console.log(`[${new Date().toISOString()}] [INFO] [审核商品] 获取商品详情: productId=${product.product_id}`);
    const response = await axios.get(`/api/product/${product.product_id}`, {
      headers: { Authorization: `Bearer ${token}` }
    });
    // 打印完整的响应数据以便调试
    console.log(`[${new Date().toISOString()}] [DEBUG] [审核商品] 商品详情响应数据:`, response.data);
    currentProduct.value = response.data.product;
    // 打印图片URL以便调试
    console.log(`[${new Date().toISOString()}] [DEBUG] [审核商品] 图片URL数组:`, currentProduct.value?.images);
    // 计算完整图片URL并打印
    const imageUrl = currentProduct.value?.images?.[0];
    const fullImageUrl = imageUrl ? (imageUrl.startsWith('http') || imageUrl.startsWith('data:') ? imageUrl : (imageUrl.startsWith('/uploads/') ? API_BASE + imageUrl : defaultProductImg)) : defaultProductImg;
    console.log(`[${new Date().toISOString()}] [DEBUG] [审核商品] 完整图片URL: ${fullImageUrl}`);
    // 确保价格和原价是数字类型
    if (currentProduct.value) {
      currentProduct.value.price = Number(currentProduct.value.price);
      currentProduct.value.original_price = currentProduct.value.original_price ? Number(currentProduct.value.original_price) : undefined;
    }
    console.log(`[${new Date().toISOString()}] [INFO] [审核商品] 商品详情获取成功: productId=${product.product_id}, 商品名称=${currentProduct.value?.name}`);
  } catch (error) {
    console.error(`[${new Date().toISOString()}] [ERROR] [审核商品] 获取商品详情失败:`, error);
    alert('获取商品详情失败');
  } finally {
    loadingProductDetail.value = false;
  }
};

/**
 * 关闭审核模态框
 */
const closeApproveModal = () => {
  showApproveModal.value = false;
  currentProduct.value = null;
};

/**
 * 审核通过商品
 */
const approveProduct = async () => {
  if (!currentProduct.value) return;

  try {
    const token = localStorage.getItem('token');
    console.log(`[${new Date().toISOString()}] [INFO] [审核商品] 审核通过: productId=${currentProduct.value.product_id}`);
    await axios.put(`/api/admin/products/${currentProduct.value.product_id}/status`, {
      status: 1
    }, {
      headers: { Authorization: `Bearer ${token}` }
    });
    alert('商品审核已通过');
    console.log(`[${new Date().toISOString()}] [SUCCESS] [审核商品] 商品审核通过: productId=${currentProduct.value.product_id}`);
    closeApproveModal();
    fetchProducts(); // 重新获取商品列表
  } catch (error: any) {
    console.error(`[${new Date().toISOString()}] [ERROR] [审核商品] 审核通过失败:`, error);
    alert(`审核失败: ${error.message}`);
  }
};

/**
 * 拒绝商品审核
 */
const rejectProduct = async () => {
  if (!currentProduct.value) return;

  try {
    const token = localStorage.getItem('token');
    console.log(`[${new Date().toISOString()}] [INFO] [审核商品] 拒绝审核: productId=${currentProduct.value.product_id}`);
    await axios.put(`/api/admin/products/${currentProduct.value.product_id}/status`, {
      status: 3
    }, {
      headers: { Authorization: `Bearer ${token}` }
    });
    alert('商品已拒绝并下架');
    console.log(`[${new Date().toISOString()}] [SUCCESS] [审核商品] 商品已拒绝: productId=${currentProduct.value.product_id}`);
    closeApproveModal();
    fetchProducts(); // 重新获取商品列表
  } catch (error: any) {
    console.error(`[${new Date().toISOString()}] [ERROR] [审核商品] 拒绝审核失败:`, error);
    alert(`操作失败: ${error.message}`);
  }
};
import CommonLayout from '../components/CommonLayout.vue';
import { formatDate } from '../utils/date-utils.ts';

// 定义商品接口类型
interface Product {
  product_id: number;
  seller_id: number;
  name: string;
  price: number;
  original_price?: number;
  category_id: number;
  created_at: string;
  updated_at: string;
  status: number;
  view_count: number;
  // @deprecated 使用images数组代替
  image_url?: string | null;
  images?: string[];
  description?: string;
  seller_name: string;
  seller_avatar?: string | null;
  category_name: string;
  title: string;
}

// 分类数据
const allCategories = ref<any[]>([]);
// 分页相关响应式变量


// 状态管理
const products = ref<Product[]>([]);
const loading = ref<boolean>(false);

// 筛选表单数据
const filterForm = reactive<{
  keyword: string;
  sortByTime: string;
  sortByPrice: string;
  categoryId: string;
  status: string;
}>({
  keyword: '',
  sortByTime: '',
  sortByPrice: '',
  categoryId: '',
  status: ''
});

/**
 * 获取商品分类
 */
const fetchCategories = async () => {
  try {
    const token = localStorage.getItem('token');
    const response = await axios.get('/api/admin/products/categories', {
      headers: { Authorization: `Bearer ${token}` }
    });
    // 直接使用扁平结构分类数据
    allCategories.value = response.data.categories || [];
  } catch (error) {
    console.error(`[${new Date().toISOString()}] [ERROR] 获取商品分类失败:`, error);
    alert('获取商品分类失败');
  }
};

/**
 * 获取商品列表数据
 * @param filters 筛选条件
 */
const fetchProducts = async (filters?: Record<string, any>) => {
  loading.value = true;
  try {
    const token = localStorage.getItem('token');
    // 构建筛选参数，如果没有传入filters，则使用当前filterForm中的所有条件
    const defaultFilters = {
      keyword: filterForm.keyword || undefined,
      category_id: filterForm.categoryId || undefined,
      status: filterForm.status || undefined,
      sortByTime: filterForm.sortByTime || undefined,
      sortByPrice: filterForm.sortByPrice || undefined
    };
    const params = {
      ...defaultFilters,
      ...filters,
      page: currentPage.value,
      pageSize: pageSize.value
    };

    // 前端日志：记录请求参数
    console.log(`[${new Date().toISOString()}] [INFO] 商品列表请求参数: ${JSON.stringify(params)}`);

    const response = await axios.get('/api/admin/products', {
      headers: { Authorization: `Bearer ${token}` },
      params,
    });

    // 前端日志：记录响应结果
    console.log(`[${new Date().toISOString()}] [INFO] 商品列表响应结果: ${JSON.stringify(response.data)}`);

    // 打印原始数据以便调试
    console.log(`[${new Date().toISOString()}] [DEBUG] 原始商品数据:`, response.data.products);

    // 更新分页信息
    // 从pagination对象中获取分页数据
    totalPages.value = response.data.pagination?.totalPages || 1;
    console.log(`[${new Date().toISOString()}] [DEBUG] 分页信息: totalPages=${totalPages.value}, currentPage=${currentPage.value}, pageRange=${JSON.stringify(pageRange.value)}`);
    
    products.value = (response.data.products as Product[]).map((product: Product) => {
      // 检查name是否存在
      if (!product.name) {
        console.warn(`[${new Date().toISOString()}] [WARN] 商品ID ${product.product_id} 没有name字段或name为空`);
      }
      
      return {
        ...product,
        price: Number(product.price),
        original_price: Number(product.original_price)
      };
    }) || [];

    // 打印处理后的数据
    console.log(`[${new Date().toISOString()}] [DEBUG] 处理后的商品数据:`, products.value);
  } catch (error: any) {
    console.error(`[${new Date().toISOString()}] [ERROR] 获取商品列表失败:`, error);
    alert(`获取商品列表失败: ${error.message}`);
    products.value = [];
    totalPages.value = 1;
  } finally {
    loading.value = false;
  }
};

/**
 * 设置每页显示数量
 * @param size 每页显示数量
 */
const setPageSize = (size: number) => {
  pageSize.value = size;
  currentPage.value = 1; // 重置到第一页
  fetchProducts();
};

// 确保pageSize在分页计算中被正确使用
const totalPagesComputed = computed(() => {
  // 这里应该根据实际总条数和pageSize计算总页数
  // 但由于我们从API获取totalPages，这里只是返回它
  return totalPages.value;
});

/**
 * 格式化分类显示文本
 * @param categoryId 分类ID
 * @returns 格式化后的分类名称
 */
const formatCategory = (categoryId: number): string => {
  const category = allCategories.value.find(cat => cat.category_id === categoryId);
  return category ? category.name : '未知分类';
};

/**
 * 处理筛选提交
 */
const handleFilter = () => {
  // 构建筛选参数
  const filters: Record<string, any> = {};
  if (filterForm.keyword) filters.keyword = filterForm.keyword;
  if (filterForm.categoryId) filters.category_id = filterForm.categoryId;
  if (filterForm.status) filters.status = filterForm.status;
  if (filterForm.sortByTime) filters.sortByTime = filterForm.sortByTime;
  if (filterForm.sortByPrice) filters.sortByPrice = filterForm.sortByPrice;

  fetchProducts(filters);
};

/**
 * 重置筛选条件
 */
const resetFilter = () => {
  filterForm.categoryId = '';
  filterForm.sortByTime = '';
  filterForm.sortByPrice = '';
  filterForm.status = '';
  fetchProducts();
};

/**
 * 查看商品详情
 * @param product 商品对象
 */
const viewProductDetail = async (product: Product) => {
  showViewModal.value = true;
  loadingViewDetail.value = true;
  try {
    const token = localStorage.getItem('token');
    console.log(`[${new Date().toISOString()}] [INFO] [查看商品] 获取商品详情: productId=${product.product_id}`);
    const response = await axios.get(`/api/product/${product.product_id}`, {
      headers: { Authorization: `Bearer ${token}` }
    });
    // 打印完整的响应数据以便调试
    console.log(`[${new Date().toISOString()}] [DEBUG] [查看商品] 商品详情响应数据:`, response.data);
    viewedProduct.value = response.data.product;
    // 打印图片URL以便调试
    // 打印图片URL数组以便调试
    console.log(`[${new Date().toISOString()}] [DEBUG] [查看商品] 图片URL数组:`, viewedProduct.value?.images);
    // 计算完整图片URL并打印（使用第一张图片）
    const imageUrl = viewedProduct.value?.images?.[0];
    const fullImageUrl = imageUrl ? (imageUrl.startsWith('http') || imageUrl.startsWith('data:') ? imageUrl : (imageUrl.startsWith('/uploads/') ? API_BASE + imageUrl : defaultProductImg)) : defaultProductImg;
    console.log(`[${new Date().toISOString()}] [DEBUG] [查看商品] 完整图片URL: ${fullImageUrl}`);
    // 确保价格和原价是数字类型
    if (viewedProduct.value) {
      viewedProduct.value.price = Number(viewedProduct.value.price);
      viewedProduct.value.original_price = viewedProduct.value.original_price ? Number(viewedProduct.value.original_price) : undefined;
    }
    console.log(`[${new Date().toISOString()}] [INFO] [查看商品] 商品详情获取成功: productId=${product.product_id}, 商品名称=${viewedProduct.value?.title}`);
  } catch (error) {
    console.error(`[${new Date().toISOString()}] [ERROR] [查看商品] 获取商品详情失败:`, error);
    alert('获取商品详情失败');
  } finally {
    loadingViewDetail.value = false;
  }
};

/**
 * 关闭查看详情模态框
 */
const closeViewModal = () => {
  showViewModal.value = false;
  viewedProduct.value = null;
};

/**
 * 处理商品下架
 * @param productId 商品ID
 */
const handle下架 = async (productId: number) => {
  if (!confirm('确定要下架该商品吗？')) return;

  try {
    const token = localStorage.getItem('token');
    await axios.put(`/api/admin/products/${productId}/status`, { status: 3 }, {
      headers: { Authorization: `Bearer ${token}` }
    });

    alert('商品已成功下架');
    fetchProducts(); // 重新获取商品列表
  } catch (error: any) {
    console.error('商品下架失败:', error);
    alert(`商品下架失败: ${error.message}`);
  }
}

/**
 * 处理商品上架
 * @param productId 商品ID
 */
const handle上架 = async (productId: number) => {
  if (!confirm('确定要上架该商品吗？')) return;

  try {
    const token = localStorage.getItem('token');
    await axios.put(`/api/admin/products/${productId}/status`, { status: 1 }, {
      headers: { Authorization: `Bearer ${token}` }
    });

    alert('商品已成功上架');
    fetchProducts(); // 重新获取商品列表
  } catch (error: any) {
    console.error('商品上架失败:', error);
    alert(`商品上架失败: ${error.message}`);
  }
};

// 组件挂载时获取数据
onMounted(() => {
  console.log(`[${new Date().toISOString()}] [INFO] [商品管理] 组件已挂载，开始获取数据`);
  fetchCategories();
  fetchProducts();
});

/**
 * 处理分类筛选变化事件
 * 重置页码并重新获取商品列表
 */
const handleCategoryChange = () => {
  // 记录分类筛选日志
  console.log(`[${new Date().toISOString()}] [INFO] 分类筛选变更为: ${filterForm.categoryId}`);
  // 重置页码为第一页
  currentPage.value = 1;
  // 重新获取商品列表
  fetchProducts();
};
</script>

<style scoped>
/* 复用用户管理页面的样式，根据需要调整 */

/* 查看和上架按钮样式 */
.btn查看 {
  background-color: #dbeafe;
  color: #1e40af;
}

.btn上架 {
  background-color: #dcfce7;
  color: #166534;
}
.filter-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.filter-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.filter-input,
.filter-select {
  width: 100%;
  padding: 8px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  font-size: 14px;
}

.filter-btn {
  padding: 8px;
  background: #2563eb;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
}

.reset-btn {
  padding: 8px;
  background: #f1f5f9;
  color: #334155;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
}

.product-table-container {
  overflow-x: auto;
}

.product-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 600px;
}

.product-table th,
.product-table td {
  padding: 12px 16px;
  text-align: left;
  vertical-align: middle;
}

.product-table th {
  background-color: #f8fafc;
  font-weight: 600;
  color: #334155;
}

.product-row:hover {
  background-color: #f8fafc;
}

.status-tag {
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}

.status-active {
  background-color: #dcfce7;
  color: #166534;
}

.status-pending {
  background-color: #fef3c7;
  color: #92400e;
}

.status-sold {
  background-color: #dbeafe;
  color: #1e40af;
}

.status-inactive {
  background-color: #fee2e2;
  color: #b91c1c;
}

/* 审核模态框样式 */
.approve-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.approve-modal {
  background-color: white;
  border-radius: 8px;
  width: 90%;
  max-width: 600px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid #e2e8f0;
}

.modal-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}

.close-btn {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #64748b;
}

.modal-body {
  padding: 16px;
}

.loading {
  text-align: center;
  padding: 20px;
  color: #64748b;
}

.error-message {
  text-align: center;
  padding: 20px;
  color: #ef4444;
}

.product-detail {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.product-image {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  max-height: 300px;
  object-fit: contain;
}

.product-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px;
  border-top: 1px solid #e2e8f0;
}

.btn-common {
  padding: 8px 16px;
  border-radius: 6px;
  font-weight: 500;
  cursor: pointer;
  border: none;
}

.btn审核 {
  background-color: #fef3c7;
  color: #92400e;
}

.btn下架 {
  background-color: #ef4444;
  color: white;
}

.btn-approve {
  background-color: #10b981;
  color: white;
}

.btn-reject {
  background-color: #ef4444;
  color: white;
}

.action-buttons {
  display: flex;
  gap: 8px;
}

.btn-common {
  padding: 6px 12px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
}

.btn下架 {
  background-color: #fee2e2;
  color: #b91c1c;
}

.btn下架:disabled {
  background-color: #f1f5f9;
  color: #94a3b8;
  cursor: not-allowed;
}

/* 审核按钮样式 */
.btn审核 {
  background-color: #fef3c7;
  color: #92400e;
}

.btn-approve {
  background-color: #dcfce7;
  color: #166534;
}

.btn-reject {
  background-color: #fee2e2;
  color: #b91c1c;
}

/* 分页按钮样式 */
.pagination-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
  padding: 10px;
}

.pagination-info {
  color: #64748b;
  font-size: 14px;
}

.pagination-buttons {
  display: flex;
  gap: 8px;
}

.pagination-btn {
  padding: 6px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  background-color: white;
  color: #334155;
  cursor: pointer;
  font-size: 14px;
}

.pagination-btn:hover {
  background-color: #f8fafc;
}

.pagination-btn:active {
  background-color: #e2e8f0;
}

.pagination-btn:disabled {
  background-color: #f1f5f9;
  color: #94a3b8;
  cursor: not-allowed;
}

.pagination-btn.active {
  background-color: #2563eb;
  color: white;
  border-color: #2563eb;
}

/* 审核模态框样式 */
.approve-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.approve-modal {
  background-color: white;
  border-radius: 8px;
  width: 90%;
  max-width: 800px;
  max-height: 90vh;
  overflow-y: auto;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid #e2e8f0;
}

.close-btn {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  padding: 0 8px;
}

.modal-body {
  padding: 16px;
}

.product-detail {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.product-images {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}

.image-item {
  flex: 1 0 200px;
  max-width: 200px;
}

.product-image {
  width: 100%;
  height: auto;
  border-radius: 6px;
  max-height: 200px;
  object-fit: contain;
}

.product-info {
  width: 100%;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px;
  border-top: 1px solid #e2e8f0;
}

.loading {
  text-align: center;
  padding: 32px;
  color: #666;
}
</style>

